<template>
    <div class="siteSetTable">
        <div class="">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">站点设置</span></el-divider>
        </div>
        <div class="siteSetCard">

            <el-form :model="script" status-icon :rules="rules" label-width="110px" ref="script"
                     :label-position="labelPosition">
                <el-card class="box-card">
                    <el-form-item label="H5页面代码" prop="html">
                        <el-input
                                type="textarea"
                                :rows="7"
                                placeholder="HTML5代码"
                                v-model="script.html">
                        </el-input>
                    </el-form-item>
                </el-card>
                <el-card class="box-card">
                    <el-form-item label="js效果代码" prop="js">
                        <el-input
                                type="textarea"
                                :rows="7"
                                placeholder="JavaScript代码"
                                v-model="script.js">
                        </el-input>
                    </el-form-item>
                </el-card>
                <el-card class="box-card">
                    <el-form-item label="css布局代码" prop="css">
                        <el-input
                                type="textarea"
                                :rows="7"
                                placeholder="CSS布局代码"
                                v-model="script.css">
                        </el-input>
                    </el-form-item>
                </el-card>
                <el-form-item class="bottomBtn">
                    <!--这里save(formName)方法保存，ref别名的module-->
                    <el-button id="submitBtnContact" type="primary" @click="save('script')">立即更新</el-button>
                    <el-button @click="resetForm('siteSet')">重置</el-button>
                </el-form-item>
            </el-form>

        </div>

    </div>
</template>

<script>
    export default {
        name: "SiteThirdCodeSet",
        data() {
            let scriptValidate = (rule, value, callback) => {

                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {

                    callback(new Error("名称不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("名称长度至少3位"));
                } else {
                    callback();
                }

            }
            return {
                message: '这里是大模块-站点设置表内容页',
                siteSets: [],
                siteSet: {},
                script: {},
                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isOpen: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                labelPosition: 'right',
                //注意，这里如果校验失败，需要在{}对象中填入验证属性
                rules: {
                    html: [
                        {validator: scriptValidate, trigger: 'blur'}
                    ],
                },
                //key
                seoKeyword: [],
                inputVisible: false,
                seoKey: ''
            }
        },
        mounted() {
            //1.普通列表查询
            this.list();
        },
        methods: {
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleClose(tag) {
                this.seoKeyword.splice(this.seoKeyword.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveKeyInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let seoKey = this.seoKey;
                if (seoKey) {
                    this.seoKeyword.push(seoKey);
                }
                this.inputVisible = false;
                this.seoKey = '';
            },
            //1.list查询
            list() {
                Loadings.show();
                let responseMsg = ''
                this.$axios.get(process.env.VUE_APP_SERVER + '/system/admin/siteSet/dtoList')
                    .then((response) => {
                        Loadings.hide();
                        let resp = response.data;
                        for (let i = 0; i < resp.length; i++) {
                            this.siteSet = resp[0];
                            this.seoKeyword = this.siteSet.seoKeyword;
                            this.script = this.siteSet.script || {};
                        }
                    })
            },
            //2.查询当前页，需要设置变量传入pageHelper分页插件
            pageList(page) {
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteSet/pageList', {
                    currentPage: page, //向后端发送参数。当前页
                    size: this.$refs.pageHelper.size, //引用传入组件后，在标签中refs定义的别名
                }).then((response) => {
                    Loadings.hide();
                    let resp = response.data;
                    this.siteSets = resp.responseData.listPageData;
                    this.$refs.pageHelper.render(page, resp.responseData.totalSize);

                })
            },

            //更新显示show
            save(formName) {
                let responseMsg = '';
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.siteSet.script = this.script;
                        this.$axios.post(process.env.VUE_APP_SERVER + '/system/admin/siteSet/save', this.siteSet)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response.responseMsg;

                                if (resp.success) {
                                    this.list();
                                    //引入全局变量toast提示
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: responseMsg,
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topLine {
        background-color: #2a92ee;
    }

    .lineIcon {
        font-size: 22px;
        color: #2a92ee;
        position: relative;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #2a92ee;
    }

    /*table样式*/
    .previous-row {
        background: #f0f9eb;
        margin-left: 2%;
        max-width: 96%;

    }

    .optionList {
        text-align: center;
    }

    /deep/ .el-table td, .el-table th {
        padding: 5px 0;
        text-align: center;
    }

    /deep/ .el-table .cell {
        padding-right: 2px;
        line-height: 20px;
        text-align: center;

    }

    /deep/ .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
        padding-left: 5px;
    }

    /*卡片调整*/
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    /*card部分*/
    .el-form-item {
        margin-bottom: 0;
    }

    .box-card {
        margin-bottom: 5px;
    }

    .bottomBtn {
        margin-top: 20px;
    }

    .siteSetCard {
        margin-top: 40px;
    }

    /*/deep/ .el-card__header{
        padding: 5px;
        color: #1d7dd6;
        text-align: left;
    }*/
    /*输入行控制*/
    .inputLine {
        float: left;
    }

    #isShow {

    }

    /deep/ .el-switch {
        line-height: 40px;
        display: block;
    }

    /deep/ .el-switch__core {
        width: 50px !important;
        height: 25px;
        border-radius: 10px;
        border: 2px solid #DCDFE6;
    }

    /deep/ .el-switch__core:after {
        width: 18px;
        height: 18px;

    }

    /*提示框的字符颜色*/
    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*关键字*/
    .keyTags {
        float: left;
        margin-right: 8px;
    }

    .keyTagsInput {
        float: left;
    }

    .el-tag {

    }

    .input-new-tag {
        max-width: 230px;
        float: left;
    }
</style>